<template>
  <div class="goods" style="margin-top: 10px;margin-left: 15px;margin-right: 15px">
    <div class="query">
      <el-form :inline="true" :model="goodsQuery" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="goodsQuery.goodsName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="goodsQuery.goodsCat" placeholder="请选择商品类别">

            <el-option v-for="item in goodsCatList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getGoodsList">查询</el-button>
          <el-button type="primary" @click="goodsAddVisible = true">新增商品</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table
        :data="goodsList"
        style="width: 100%"
        border
        fit
        highlight-current-row
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        v-loading="listLoading"
      >
        <el-table-column
          prop="id"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="goods_cat_info.name"
          label="商品类别"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
        >
        </el-table-column>
        <el-table-column
          prop="image"
          label="商品图片"
        >
          <template v-slot="{row}">

            <img :src="base_url+row.image" style="width: 40%;height: 25%">


          </template>
        </el-table-column>
        <el-table-column
          prop="goods_desc"
          label="商品描述"
        >
        </el-table-column>
        <el-table-column
          prop="day_per"
          label="每日限制"
        >
          <template v-slot="{row}">
            <el-tag :type="row.day_per | dayPerStatus">
              {{ row.day_per  | dayPerFilter }}
            </el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="goods_stock"
          label="累计库存总数"
        >
          <template v-slot="{row}">
            {{ row.goods_stock ? row.goods_stock.total_num : '0' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="goods_stock"
          label="累计领用"
        >
          <template v-slot="{row}">
            {{ row.goods_stock ? row.goods_stock.use_num : '0' }}

          </template>
        </el-table-column>
        <el-table-column
                prop="goods_stock"
                label="累计报损"
              >
                <template v-slot="{row}">
                  {{ row.goods_stock ? row.goods_stock.bad_num : '0' }}

                </template>
              </el-table-column>
        <el-table-column
          prop="goods_stock"
          label="累计剩余库存"
        >
          <template v-slot="{row}">
            {{ row.goods_stock ? row.goods_stock.leave_num : '0' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="goods_stock"
          label="告警数量"
        >
          <template v-slot="{row}">
            {{ row.goods_stock ? row.goods_stock.warn_num : '0' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template v-slot="{row}">
            <el-tag :type="row.status | dayPerStatus">
              {{ row.status  | statusText }}
            </el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="updated_at"
          label="创建时间"
        >
        </el-table-column>

        <el-table-column label="操作" align="center" min-width="120"
                         class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">

            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>

            <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
              删除
            </el-button>
            <el-dropdown trigger="click" style="margin-left: 5px">
              <el-button size="mini" type="info"  @click="handleDelete(row,$index)">
                更多<i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  style="margin-top: 10px">
                  <el-button type="primary" size="mini" icon="el-icon-setting" @click="goodsSetting(row)">配置</el-button>
                </el-dropdown-item>
                <el-dropdown-item  style="margin-top: 10px">
                  <el-button type="warning" size="mini" icon="el-icon-sell" @click="handleStock(row,'进货')">进货</el-button>
                </el-dropdown-item >
                <el-dropdown-item  style="margin-top: 10px">
                  <el-button type="success" size="mini" icon="el-icon-thumb" @click="handleStock(row,'领用')">领用</el-button>
                </el-dropdown-item>
                <el-dropdown-item  style="margin-top: 10px">
                  <el-button type="danger" size="mini" icon="el-icon-s-release" @click="handleStock(row,'报损')">报损</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="goodsQuery.page_num"
                  :limit.sync="goodsQuery.page_size" @pagination="getGoodsList"/>
    </div>

    <!--   商品新增  start -->
    <el-dialog title="商品新增" :visible.sync="goodsAddVisible" width="20%">
      <el-form :model="goodsInfo">
        <el-form-item label="商品名称">
          <el-input style="width: 80%" v-model="goodsInfo.name" autocomplete="off"
                    placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select style="width: 80%" v-model="goodsInfo.goods_cat" placeholder="请选择商品类别">

            <el-option v-for="item in goodsCatList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="upload-demo"
            action="/admin-api/goodsManage/goodsImage"
            name="goodsImage"
            :on-preview="handlePreview"
            :limit=1
            :on-remove="handleRemove"
            :on-success="handeSuccess"
            :file-list="fileList"
            :headers="uploadHeaders"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP,"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" style="width: 80%" maxlength="100"
                    show-word-limit v-model="goodsInfo.goods_desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="goodsAdd()">确 定</el-button>
      </div>
    </el-dialog>
    <!--   商品新增  end -->

    <!--   商品配置  start -->
    <el-dialog title="商品配置" :visible.sync="goodsStockVisible" width="20%">
      <el-form :model="goodsSetInfo">
        <el-form-item label="商品总数">
          <el-input style="width: 80%" type="number" v-model.number="goodsSetInfo.total_num" autocomplete="off"
                    :disabled='initStock' placeholder="请输入商品总数"></el-input>
        </el-form-item>
        <el-form-item label="商品领用">
          <el-input style="width: 80%" type="number" v-model.number="goodsSetInfo.use_num" autocomplete="off"
                    :disabled='initStock' placeholder="请输入商品领用数"></el-input>
        </el-form-item>
        <el-form-item label="剩余库存">
          <el-input style="width: 80%" type="number" v-model.number="goodsSetInfo.leave_num" autocomplete="off"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="告警数量">
          <el-input style="width: 80%" type="number" v-model.number="goodsSetInfo.warn_num"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="每日限制">
          <el-input style="width: 80%" type="number" v-model.number="goodsSetInfo.day_per"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsStockVisible = false">取 消</el-button>
        <el-button type="primary" @click="goodsSetSave()">确 定</el-button>
      </div>
    </el-dialog>
    <!--   商品配置  end -->

    <!--  商品出进货 领用 报损 操作 start  -->
    <el-dialog :title="stockOperationForm.title" :visible.sync="stockOperationVisible" width="20%">
      <el-form :model="stockInfo">
        <el-form-item :label="stockOperationForm.field_label">
          <el-input style="width: 80%" type="number" v-model.number="stockInfo.total_num" autocomplete="off"
                    :max='stockOperationForm.max_value' :placeholder="stockOperationForm.placeholder" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stockOperationVisible = false">取 消</el-button>
        <el-button type="primary" @click="stockSave()">确 定</el-button>
      </div>
    </el-dialog>
    <!--  商品出进货 领用 报损 操作 end  -->

    <!--    商品编辑 start-->
    <el-dialog title="商品编辑" :visible.sync = 'goodsEditShow' width="20%">

      <el-form :model="goodsTempInfo">
        <el-form-item label="商品名称">
          <el-input style="width: 80%" v-model="goodsTempInfo.name" autocomplete="off"
                    placeholder="请输入商品名称"></el-input>
        </el-form-item>

        <el-form-item label="商品类别">
          <el-select style="width: 80%" v-model="goodsTempInfo.cat_id" placeholder="请选择商品类别">

            <el-option v-for="item in goodsCatList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片" style="width: auto;height: 120px">
          <img style="width: 100px; height: 100px"  :src="base_url+goodsTempInfo.image" ></img>
        </el-form-item>

        <el-form-item label="更改图片">

          <el-upload
            class="upload-demo"
            action="/admin-api/goodsManage/goodsImage"
            name="goodsImage"
            ref="goodsEditImage"
            :on-preview="handlePreview"
            :limit=1
            :on-remove="handleRemove"
            :on-success="handeEditSuccess"
            :file-list="fileList"
            :headers="uploadHeaders"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP,"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" style="width: 80%" maxlength="100"
                    show-word-limit v-model="goodsTempInfo.goods_desc" ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsEditShow = false">取 消</el-button>
        <el-button type="primary" @click="goodsEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    商品编辑 end-->

<!--  商品库存  -->
  </div>
</template>

<script src="./_goods.js" lang="js"></script>
<style src="./_goods.scss" lang="scss" scoped></style>
